<!--
 * @Description: 处理提醒
 * @Author: lixianggang
 * @Date: 2022-11-17 17:34:12
 * @LastEditors: lixianggang
 * @LastEditTime: 2022-12-07 18:17:12
-->
<template>
  <div>
    <el-dialog title="通知设置" :visible.sync="showDialog" width="40%">
      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
        <el-form-item label="通知" prop="notice">
          <el-switch v-model="form.notice"></el-switch>
        </el-form-item>
        <div v-if="form.notice">
          <el-form-item label="接收员工" prop="staff">
            <el-cascader clearable filterable :show-all-levels="false" :props="cascaderProps"
                         :options="options" placeholder="接收员工" v-model="staff" @change="selectOption"
                         style="width: 100%;"
            >
            </el-cascader>
            <div class="tag-text">（跟进中客户，跟进人将自动提示，此处可配置管理者）</div>
          </el-form-item>
          <el-form-item label="通知频率" prop="noticeRate">
            <el-radio-group v-model="form.noticeRate">
              <el-radio v-for="item in statusOptions" :key="item.id" :label="+item.dictValue">
                {{ item.dictLabel }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer">
        <el-button @click="cancelCheck">取 消</el-button>
        <el-button type="primary" @click="saveCheck" :loading="saveLoading">确认</el-button>
      </div>
    </el-dialog>
    <!-- 选择兜底员工弹窗 -->
    <!-- <select-user :visible.sync="selectBottomUserVisible" @confirm="selectBottomUserConfirm"></select-user> -->
  </div>
</template>

<script>
import { queryRiskConfig, updateRiskConfig } from '@/api/operate/riskControl'
import { SelectStaff } from '@/components/index.js'
import SelectUser from '@/views/customerOperations/liveCode/selectUser.vue'
import { getUser } from '@/api/operate/verbalTrick'

export default {
  components: { SelectUser, SelectStaff },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    remindType: {
      type: Number
    }
  },
  computed: {
    showDialog: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  data() {
    return {
      saveLoading: false,
      staff: '',
      form: {
        notice: false,
        noticePersons: '',
        noticeRate: '',
        noticeType: this.remindType,
        staff: []
      },
      rules: {
        notice: [{ required: true, message: '请选择通知', trigger: 'change' }],
        staff: [{ required: true, message: '请选择接收员工', trigger: 'change' }],
        noticeRate: [{ required: true, message: '请选择通知频率', trigger: 'change' }]
      },
      selectBottomUserVisible: false,
      statusOptions: [],
      options: [],
      cascaderProps: {
        multiple: true
      }
    }
  },
  methods: {
    // selectBottomUserConfirm(value) {
    //     this.$set(this.form, "staff", value)
    // },
    handleDeleteStaff(value, index) {
      value.splice(index, 1)
    },
    cancelCheck() {
      this.$refs.form.resetFields()
      this.showDialog = false
    },
    saveCheck() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.handleCheck()
        } else {
          return false
        }
      })
    },
    handleCheck() {
      const params = {
        ...this.form,
        isNotice: this.form.notice ? 1 : 0,
        noticePersons: this.form.staff.toString()
      }
      this.saveLoading = true
      updateRiskConfig(params)
        .then(res => {
          this.saveLoading = false
          if (res.code === 200) {
            this.showDialog = false
            this.$message.success(res.msg || '通知设置成功')
            this.$refs.form.resetFields()
            this.init()
          }
        })
        .catch(err => {
          this.saveLoading = false
        })
    },
    selectOption(select) {
      this.form.staff = select.map(item => item[0])
    },
    async init() {
      this.options = []
      try {
        let userList = await getUser({ deptFlag: 'Y', authFlag: 'Y' })
        if (userList.code === 200 && userList.data.length) {
          userList.data.forEach((item) => {
            this.options.push({
              id: item.userId,
              value: item.userId,
              label: item.userName
              // children: [],
            })
          })
        }
        let res = await queryRiskConfig(this.remindType)
        if (!res.data) return
        const data = res.data
        this.form = {
          ...this.form,
          notice: data.isNotice === 1,
          noticeRate: data.noticeRate
        }
        this.staff = data.noticePersons.split(',')
        this.form.staff = data.noticePersons
        console.log(this.staff)
        // this.selectBottomUserConfirm(res.data.weUsers)
      } catch (error) {
        console.log(error)
      }
    }
  },
  mounted() {
    this.init()
    this.getDicts('notice_rate').then((res) => {
      if (res.code === 200) {
        this.statusOptions = res.data
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.tag-text {
  color: rgba(192, 192, 192, 1);
  font-size: 13px;
}
</style>
